@import "../../color.less";
.select(@main-font-color, @drop-down-background-color, @hover-background-color, @border-color) {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  color: @main-font-color;
  cursor: pointer;
  .select-text-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 2px;
    border: solid 1px @border-color;
    padding: 0 6px;
    .select-arrow {
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid @main-font-color;
      transition: all .2s;
      transform-origin: center center;
    }
  }
  .select-drop-down-container {
    position: absolute;
    left: 0;
    top: 100%;
    border-radius: 2px;
    padding: 1px;
    background: @drop-down-background-color;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12);
    z-index: 20;
    transform: scaleY(0);
    opacity: 0;
    transition: all .2s;
    transform-origin: top;
    white-space: nowrap;
    li {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 36px;
      padding: 0 10px;
      &:hover {
        background: @hover-background-color;
      }
    }
  }
  &:hover {
    .select-text-container {
      .select-arrow {
        transform: rotate(180deg);
      }
    }
    .select-drop-down-container {
      transform: scaleY(1);
      opacity: 1;
    }
  }
}

.select-night {
  .select(
    @main-font-color-night,
    @content-background-color-night,
    @hover-background-color-night,
    @border-color-night
  )
}

.select-day {
  .select(
    @main-font-color-day,
    @content-background-color-day,
    @hover-background-color-day,
    @border-color-day
  )
}
